<template>
  <div name="about" class="about-panel q-pa-md q-gutter-sm column">
    <panel-section icon="mdi-account" color="secondary">
      <div slot="title" class="account-name">Bryan Lee</div>
      <div class="account-title">Freelance Concept Designer</div>
    </panel-section>
    <panel-section icon="mdi-map-marker" color="orange">
      <div slot="title" class="location-title">LOCATION</div>
      <div class="location-name">Melbourne, Australia</div>
    </panel-section>
    <panel-section icon="mdi-account-box" color="purple">
      <div slot="title" class="col bio-title">BIO</div>
      <div class="col bio-description">
        Since the beginning of 2013, I have left my job and decided to
        chase my dream to become a concept designer.
        I have a long road ahead of me and countless things to learn and discover, but I believe that this career will allow me to express my personality and create things I have always dreamt about.
      </div>
    </panel-section>
    <panel-section icon="mdi-cake-variant" color="teal">
      <div slot="title" class="birthday-title">BIRTHDAY</div>
      <div class="birthday-content">7th September</div>
    </panel-section>
    <panel-section icon="mdi-timeline-clock" color="info">
      <div slot="title" class="since-title">MEMBER SINCE</div>
      <div class="since-content">December 2020</div>
    </panel-section>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import PanelSection from './PanelSection.vue';

@Component({
  name: 'about-panel',
  components: {
    PanelSection,
  },
})
export default class AboutPanel extends Vue {}
</script>
<style lang="stylus" scoped>
.about-panel {
  background-color: $blue-grey-8;
  font-size: 12px;

  .account-name {
    font-size: 14px;
    font-weight: bold;
  }

  .location-title {
    color: $orange;
  }

  .bio-title {
    color: $purple;
    box-sizing: border-box;
  }

  .bio-description {
    overflow: hidden;
  }

  .birthday-title {
    color: $teal;
  }

  .since-title {
    color: $info;
  }
}
</style>
